<template>
  <div class="radar-index-wrapper" v-bind="$attrs">
    <radar-comp :list="listWith" />
  </div>
</template>
<script>
import * as CONSTANTS from '@/constants/index'
import DATA from './data'
import RadarComp from './Radar'
export default {
  props: {
    listItem: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
  components: { RadarComp },
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      originList: [
        {
          type: CONSTANTS.LABEL_LANGUAGESCORE,
          name: CONSTANTS.LABEL_LANGUAGE,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_LOGICSCORE,
          name: CONSTANTS.LABEL_LOGIC,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_SPACESCORE,
          name: CONSTANTS.LABEL_SPACE,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_SPORTSCORE,
          name: CONSTANTS.LABEL_SPORT,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_MUSICSCORE,
          name: CONSTANTS.LABEL_MUSIC,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_RELATIONSHIPSCORE,
          name: CONSTANTS.LABEL_RELATIONSHIP,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_NATURESCORE,
          name: CONSTANTS.LABEL_NATURE,
          score: 0,
        },
        {
          type: CONSTANTS.LABEL_INTROSPECTIONSCORE,
          name: CONSTANTS.LABEL_INTROSPECTION,
          score: 0,
        },
      ],
    }
  },
  computed: {
    listWithScore() {
      return this.originList.map((item) => {
        const score = this.listItem[item.type]
        return {
          ...item,
          score,
        }
      })
    },
    listWith() {
      return DATA.map((item) => {
        const val = this.listWithScore.find((i) => i.type === item.type)
        return {
          ...item,
          score: val.score,
        }
      })
    },
  },
  mounted() {},
  filters: {},
  watch: {},
  methods: {
    getRadarCompRef() {
      this.$refs.radarCompRef.convertCanvasToImage()
    },
  },
}
</script>

<style lang="less" scoped>
.radar-index-wrapper {
  // min-height: 100%;
  width: 100%;
}
</style>
